<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Worry商城首页</title>
  <link rel="stylesheet" href="css/worry.css">
  <link rel="stylesheet" href="./css/test.css">
  <script src="js/vue.js"></script>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="./js/javascript.js"></script>
  <script src="js/worryGlobal.js"></script>
</head>
<body>

<div class="site-nav" id="myDiv">
  <div class="site-nav-bd">
    <ul>
      <li><a id="me">我的</a></li>
      <li><img src="image/foreground/gouwuche.png">
        <a id="goShoppingCart" style="position: relative">购物车
          <span id="total" style="display: none;position: absolute;background-color: red;padding:3px;color: #fff;width: 10px;height: 12px;text-align: center;border-radius: 13px;left: -30px;top: 0;font-size: 0">
            <span style="position: absolute;left: 6px;top: -8px;font-size: 8px;font-weight: bold">0</span>
          </span>
        </a>
      </li>
      <li><img src="image/foreground/shoucangjia.png"><a id="collect">收藏夹</a></li>
      <li id="contact">联系客服</li>
      <li> <a id="user"> 登录/注册</a></li>
    </ul>
  </div>
</div>
<!--logo+搜索-->
<div class="top-box">
  <div class="logo">
    <a href="#" id="logo">
      <p>忧</p>
      <p class="small">worry</p>
    </a>

  </div>
  <!--搜索框-->
  <div class="search-box">
    <div class="search-in" style="border: none">
      <span>worry<img src="image/foreground/shangpin.png" width="10"></span>
      <img src="image/foreground/sousuo.png" width="16">
      <form>
        <input type="text" id="key" placeholder="充电宝" style="width: 500px;font-size: 16px">
        <input type="button" class="but" value="搜索" id="search">
      </form>
    </div>
    <!--标签-->
    <div class="tag">
      <a href="javascript:;">运动裤</a>
      <a href="javascript:;">四件套</a>
      <a class="on" href="javascript:;">手机</a>
      <a href="javascript:;">潮流T恤</a>
      <a href="javascript:;">外套</a>
      <a href="javascript:;">女包</a>
      <a href="javascript:;">沙发</a>
      <a href="javascript:;">台灯</a>
    </div>
  </div>
</div>
<!--main-->
<div class="main-box">
  <div class="left">
    <div class="tit">主题市场</div>
    <ul class="main-nav">
      <img src="image/foreground/type/yifu.png" class="icon">
      <li><a href="javascript:;">女装</a>/</li>
      <li><a href="javascript:;">内衣</a>/</li>
      <li><a href="javascript:;">家居</a></li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/爱心.webp" class="icon">
      <li><a href="javascript:;">母婴</a>/</li>
      <li><a href="javascript:;">童装</a>/</li>
      <li><a href="javascript:;">玩具</a></li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/cailiao.png" class="icon">
      <li> 男装/</li>
      <li> 运动户外</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/huazhuangpin.png" class="icon">
      <li> 美妆/</li>
      <li> 彩妆/</li>
      <li> 个护</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/jiaju-.png" class="icon">
      <li> 手机/</li>
      <li> 数码/</li>
      <li> 企业</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/qichepiao.png" class="icon">
      <li> 大家电/</li>
      <li> 生活电源</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/shoucangjia.png" class="icon">
      <li> 零食/</li>
      <li> 生鲜/</li>
      <li> 茶酒</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/wenjuwujin.png" class="icon">
      <li> 厨具/</li>
      <li> 收纳/</li>
      <li> 清洁</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/xiezi.png" class="icon">
      <li> 家纺/</li>
      <li> 家饰/</li>
      <li> 鲜花</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/type/yifu.png" class="icon">
      <li> 女鞋/</li>
      <li> 男鞋/</li>
      <li> 箱包</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/爱心.webp" class="icon">
      <li> 图书/</li>
      <li> 文具</li>
    </ul>
    <ul class="main-nav">
      <img src="image/foreground/爱心.webp" class="icon">
      <li> 医疗保健/</li>
      <li> 进口</li>
    </ul>
  </div>
  <div class="mid">

    <div class="box">
      <div class="box-img"><img src="image/foreground/广告1.jpg"  width="500" height="250"></div>
      <div class="box-img"><img src="image/foreground/广告2.jpg"  width="500" height="250"></div>
      <div class="box-img"><img src="image/foreground/广告3.jpg"  width="500" height="250"></div>
      <div class="box-img"><img src="image/foreground/广告1.jpg"  width="500" height="250"></div>
      <div class="box-img"><img src="image/foreground/广告2.jpg"  width="500" height="250"></div>
      <div class="box-img"><img src="image/foreground/广告3.jpg"  width="500" height="250"></div>

      <div class="box-left">&lt;</div>
      <div class="box-right">&gt;</div>
      <div class="box-zhiding">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <script type="test/javascript" src="./js/jquery-3.7.1.min.js"> </script>

    <div class="ad-box">
      <img src="image/foreground/guanggao1.webp" >
      <img src="image/foreground/guanggao2.webp" >
    </div>
  </div>
  <!--个人信息-->
  <div class="right">
    <a id="my">
      <img src="image/foreground/爱心.webp" class="avatar">
      <p class="name">Hi~<span>亲爱的游客您还未登录</span></p>
    </a>
    <div id="noLogin">
      <button value="登录" id="login">登录</button>
      <button value="注册" id="reg">注册</button>
    </div>
    <div class="my-nav">
      <div class="my-nav-box">
        <a href="javascript:;">
          <p class="num">10</p>
          <p>购物车</p>
        </a>
      </div>
      <div class="my-nav-box">
        <a href="javascript:;">
          <p class="num">22</p>
          <p>待收费</p>
        </a>
      </div>
      <div class="my-nav-box">
        <a href="javascript:;">
          <p class="num">10</p>
          <p>待发货</p>
        </a>
      </div>
      <div class="my-nav-box">
        <a href="javascript:;">
          <p class="num">10</p>
          <p>待付款</p>
        </a>
      </div>
      <div class="my-nav-box">
        <a href="javascript:;">
          <p class="num">10</p>
          <p>待评价</p>
        </a>
      </div>
    </div>

    <!--公告-->
    <ul class="news">
      <li>公告新鲜事都在这里~</li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
      <li>
        <span>规则</span>
        2022年12.12租商规划商规则
      </li>
    </ul>
  </div>


  <ul class="category-list">
    <li class="category-item">
      <i class="icon-like">❤️</i>猜你喜欢
    </li>
    <li class="category-item">
      <i class="icon-sports">🏄‍♂️</i>运动户外
    </li>
    <li class="category-item">
      <i class="icon-snacks">🍪</i>馋嘴零食
    </li>
    <li class="category-item">
      <i class="icon-digital">📱</i>潮电数码
    </li>
    <li class="category-item">
      <i class="icon-fashion">👗</i>服饰时尚
    </li>
    <li class="category-item">
      <i class="icon-home">🏠</i>家居日用
    </li>
    <li class="category-item">
      <i class="icon-personal">🧴</i>个护家清
    </li>
  </ul>

  <!--商品-->
  <div class="goods" id="goodList">

  </div>
</div>

<div id="returnTop" style="background-color: #F7F7F7;width: 40px;position: fixed;right: 10px;bottom: 20px;text-align: center;opacity: 0.5;">
  <img src="image/foreground/huidaodingbu.png" style="width: 30px">
</div>


<script>
  window.onscroll = function() {
    var divHeight = 200; // 设定出现div的scrollTop高度
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var div = document.getElementById('returnTop');

    // 当滚动到指定高度时显示div
    if (scrollTop >= divHeight) {
      div.style.display = 'block';
    } else {
      div.style.display = 'none';
    }
  };
  // 当点击按钮时，滚动到页面顶部
  $("#returnTop").click(function(){
    $("html, body").animate({ scrollTop: 0 }, "slow");
  });


  $(function(){
    $.ajax({
      url: '../picture/getPictureList',
      method: 'get',
      success: function (result){
        //渲染页面
        $.each(result, function(index, obj){
          $('#goodList').append(
                  `<div class="liebiao">` +
                    `<ul>` +
                      `<li><a href="shop.html"></li>` +
                      `<li><img src="image/picture/${obj.pictureUrl}" class="niuyouguo"></a></li>` +
                      `<li id="li1"><p id="p1"><b id="b1">${obj.pictureBrandId.brandName}</b>${obj.pictureName}</p></li>` +
                      `<li id="a1">${obj.pictureActivity}</li>` +
                      `<li><a id="a2">${obj.picturePrice}</a> <a>${obj.pictureNumber}</a></li>` +
                    `</ul>` +
                 `</div>`
          );
        })
      }
    });
  })
</script>
</body>
</html>
